<template>
  <div class="box">
    <div class="box-con">
      <div class="img"></div>
      <h3>欢迎使用后台管理系统</h3>
      <el-form class="el-form" ref="loginForm" :model="form" :rules="loginForm">
        <el-form-item prop="user">
          <el-input
            type="text"
            prefix-icon="el-icon-user-solid"
            clearable
            placeholder="请输入用户名"
            v-model="form.user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            type="password"
            prefix-icon="el-icon-s-goods"
            clearable
            placeholder="请输入密码"
            v-model="form.pass"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="el-button" type="primary" @click="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from "../api/api";
export default {
  components: {},
  data() {
    // 自定义表单验证规则
    function validateUsername(rule, value, callback) {
      // 判断 value 必须是数字、字母、下划线
      if (/^\w{5,18}$/.test(value)) {
        callback();
      } else {
        callback(new Error("必须是数字、字母、下划线！"));
      }
    }
    return {
      form: {
        user: "admin",
        pass: "123456",
      },
      // 表单验证的规则
      loginForm: {
        user: [
          { required: true, message: "账号不能为空！！！", trigger: "blur" },
          {
            validator: validateUsername,
            trigger: "blur",
          },
        ],
        pass: [
          { required: true, message: "密码不能为空！！！", trigger: "blur" },
          {
            min: 5,
            max: 18,
            message: "密码长度必须是5~18位！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //   登录
    login() {
      // 先进行表单验证
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          login(this.form.user, this.form.pass).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: "恭喜你登录成！！！",
                type: "success",
              });
              localStorage.setItem("token", res.data.data.remember_token);
              this.$router.push({ path: "/user" });
            } else if (res.data.code === 201) {
              this.$message.error("账号和密码错误");
            }
          });
        }
      });
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 720px;
  background: url("http://120.53.31.103:84/adminstyle/img/login_bg.1de8de0c.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-con {
  width: 460px;
}
.img {
  width: 220px;
  height: 150px;
  background: url("http://120.53.31.103:84/uploads/image/2020-05-27/zmkrHVxaa4fVI5jtcNZ3xGy6KPU0QjXzxPjX7trh.jpeg");
  background-size: 100% 100%;
  margin: 0 auto;
}
h3 {
  text-align: center;
  color: rgb(0, 149, 255);
  line-height: 60px;
}
.el-form {
  width: 350px;
  margin: 0 auto;
  margin-top: 20px;
}
.el-button {
  width: 350px;
}
</style>